<template>
    <view class="page-wrap">
        <view class="forms">
            <template v-for="(item, index) in formItems">
                <view v-if="item.type != 'none'" class="item" :key="index">
                    <view class="label">{{ item.label }}</view>
                    <view class="right" v-if="item.type == 'input'">
                        <u-input inputAlign="right" border="none" type="text" :value="form[item.prop]"
                            :placeholder="item.placeholder" @blur="(val) => blurCheck(val, item.prop)"
                            @change="val => inputChange(val, item.prop)" />
                    </view>

                    <view class="right" v-if="item.type == 'region'">
                        <!-- <picker mode="region" @change="(e) => propChange(e.detail.value, item.prop)"
                            :value="form[item.prop]">
                            <view class="right right-flex">
                                <view :style="{ color: form[item.prop].length > 0 ? '#282828' : '#B8B8B8' }">{{
                                    regionTxt(form[item.prop], item.prop, item.placeholder) }}</view>
                                <image class="arrow" src="/static/right.png"></image>
                            </view>
                        </picker> -->
                        <view class="right right-flex">
                            {{ getRidName(form[item.prop]) }}
                        </view>
                    </view>

                    <view class="right" v-if="item.type == 'select'">
                        <!-- <picker mode="selector" :range="item.options" range-key="label"
                            @change="(e) => selectChange(e.detail.value, item.prop)" v-model="form[item.prop]"> -->
                            <view class="right right-flex">
                                <view :style="{ color: form[item.prop] ? '#282828' : '#B8B8B8' }">
                                    {{ selectTxt(form[item.prop], item.prop, '') }}</view>
                                <!-- <image class="arrow" src="/static/right.png"></image> -->
                            </view>
                        <!-- </picker> -->

                    </view>

                    <view v-if="item.type == 'radio'">
                        <u-radio-group v-model="form[item.prop]" placement="row">
                            <u-radio style="margin-left: 20rpx;" v-for="(radio, cindex) in item.options" :key="cindex"
                                :label="radio.label" :name="radio.value"></u-radio>
                        </u-radio-group>
                    </view>
                </view>
            </template>

        </view>

        <view class="forms" style="margin-top: 24rpx;padding-bottom: 30rpx;">
            <view class="item">
                <view class="label">详细地址</view>
                <view class="right">
                    <u-input inputAlign="right" border="none" type="text" :value="form['address']" placeholder="请输入详细地址"
                        @blur="(val) => blurCheck(val, 'address')" @change="val => inputChange(val, 'address')" />
                </view>
            </view>

            <view class="item" style="border-bottom: 0px;">
                <view class="label">
                    地图定位
                </view>
            </view>

            <map id="mymap"></map>

            <view class="update-btn" @tap="chooseLocation">更新定位</view>
        </view>


        <view class="list-box-title" v-if="form.updated_name&&form.updated_at">
            <view class="title">最近更新</view>
        </view>

        <view class="list-data-box" v-if="form.updated_name&&form.updated_at">
            <view class="item-box">
                <view class="name">{{ form.updated_name }}</view>
                <view class="time">{{ form.updated_at }}</view>
            </view>
        </view>

        <view class="subBtn" @tap="subMit">
            <view class="btn">更新资料</view>
        </view>


    </view>
</template>

<script>
import { getWorkInfo, getMemberRegion, setMemberInfo } from '@/api'
export default {
    computed: {

    },
    data() {
        return {
            mid: '',
            formItems: [
                {
                    type: 'input',
                    prop: 'name',
                    label: '客户名称',
                    placeholder: '请输入客户名称',
                    verify(val) {
                        return new Promise((resolve, reject) => {
                            if (!val) {
                                wx.showToast({
                                    title: '客户名称不能为空',
                                    icon: 'none'
                                })
                                reject('客户名称不能为空')
                            }
                            resolve('ok')
                        })
                    }
                },
                {
                    type: 'input',
                    prop: 'contacts',
                    label: '联系人',
                    placeholder: '请输入联系人',
                    verify(val) {
                        return new Promise((resolve, reject) => {
                            if (!val) {
                                wx.showToast({
                                    title: '联系人不能为空',
                                    icon: 'none'
                                })
                                reject('联系人不能为空')
                            }
                            resolve('ok')
                        })
                    }
                },
                {
                    type: 'input',
                    prop: 'mobile',
                    label: '手机号',
                    placeholder: '请输入手机号',
                    verify(val) {
                        return new Promise((resolve, reject) => {
                            if (!val) {
                                wx.showToast({
                                    title: '客户名称不能为空',
                                    icon: 'none'
                                })
                                reject('客户名称不能为空')
                            }
                            var reg = /^1\d{10}$/;
                            if (!reg.test(val)) {
                                reject('请输入正确的手机号')
                            }
                            resolve('ok')
                        })
                    }
                },
                {
                    type: 'region',
                    prop: 'rid',
                    label: '区域',
                    placeholder: '请选择区域',
                    // verify(val) {
                    //     return new Promise((resolve, reject) => {
                    //         if (val.length === 0) {
                    //             wx.showToast({
                    //                 title: '请选择区域',
                    //                 icon: 'none'
                    //             })
                    //             reject('请选择区域')
                    //         }
                    //         resolve('ok')
                    //     })
                    // }
                },

                {
                    type: 'select',
                    prop: 'type',
                    label: '客户类型',
                    placeholder: '请选择客户类型',
                    options: [

                        {
                            label: "网点",
                            value: '1'
                        },
                        {
                            label: "消防",
                            value: '3'
                        }, {
                            label: '基站',
                            value: '2'
                        }
                    ],
                    verify(val) {
                        return new Promise((resolve, reject) => {
                            if (!val) {
                                wx.showToast({
                                    title: '请选择客户类型',
                                    icon: 'none'
                                })
                                reject('请选择客户类型')
                            }
                            resolve('ok')
                        })
                    }
                },

                {
                    type: 'input',
                    prop: 'machine',
                    label: '机房尺寸',
                    placeholder: '请输入机房尺寸',
                    verify(val) {
                        return new Promise((resolve, reject) => {
                            if (!val) {
                                wx.showToast({
                                    title: '机房尺寸不能为空',
                                    icon: 'none'
                                })
                                reject('机房尺寸不能为空')
                            }
                            resolve('ok')
                        })
                    }
                },

                {
                    type: 'input',
                    prop: 'floor',
                    label: '机房楼层',
                    placeholder: '请输入机房楼层',
                    verify(val) {
                        return new Promise((resolve, reject) => {
                            if (!val) {
                                wx.showToast({
                                    title: '机房楼层不能为空',
                                    icon: 'none'
                                })
                                reject('机房楼层不能为空')
                            }
                            resolve('ok')
                        })
                    }
                },

                {
                    type: 'input',
                    prop: 'fire_zone',
                    label: '防火分区',
                    placeholder: '请输入防火分区',
                    verify(val) {
                        return new Promise((resolve, reject) => {
                            if (!val) {
                                wx.showToast({
                                    title: '防火分区不能为空',
                                    icon: 'none'
                                })
                                reject('防火分区不能为空')
                            }
                            resolve('ok')
                        })
                    }
                },

                {
                    type: 'radio',
                    prop: 'piping',
                    label: '消防供水管网',
                    placeholder: '请选择消防供水管网',
                    options: [
                        {
                            label: '有',
                            value: '1'
                        },
                        {
                            label: '无',
                            value: '0'
                        },
                    ],
                    verify(val) {
                        return new Promise((resolve, reject) => {
                            if (!val) {
                                wx.showToast({
                                    title: '请选择消防供水管网',
                                    icon: 'none'
                                })
                                reject('请选择消防供水管网')
                            }
                            resolve('ok')
                        })
                    }
                },

                {
                    type: 'none',
                    prop: 'address',
                    label: '详细地址',
                    placeholder: '请输入详细地址',
                    verify(val) {
                        return new Promise((resolve, reject) => {
                            if (!val) {
                                wx.showToast({
                                    title: '详细地址不能为空',
                                    icon: 'none'
                                })
                                reject('详细地址不能为空')
                            }
                            resolve('ok')
                        })
                    }
                },


            ],
            form: {
                name: '',
                contacts: '',
                mobile: '',
                rid: '',
                type: '1',
                machine: '',
                floor: '',
                fire_zone: '',
                piping: '1',
                address: '',
            },
            mapContext: {},
            latitude: '',
            longitude: '',
            regionOptions: []
        }
    },
    async onLoad(e) {
        this.mid = e.id
        await this.getMemberRegion()
        await this.getWorkInfo(e.id)
        const mapContext = wx.createMapContext('mymap', this);
        this.mapContext = mapContext;
        setTimeout(() => {
            console.log(this.latitude, this.longitude, 6666)
            this.moveMap(Number(this.latitude), Number(this.longitude))
        }, 300)
    },
    methods: {
        getRidName(id) {
            if (this.regionOptions.length == 0) return ''
            return this.regionOptions.find(v => v.id == id).name
        },
        async getWorkInfo(mid) {
            let res = await getWorkInfo({ mid, wid: this.wid })
            this.form = {
                ...this.form,
                ...res
            }
            if (res.lat && res.lon) {
                this.latitude = Number(res.lat)
                this.longitude = Number(res.lon)
            } else {
                this.latitude = wx.getStorageSync("latitude")
                this.longitude = wx.getStorageSync("longitude")
            }

        },
        async blurCheck(val, prop) {
            const verify = this.formItems.find(v => v.prop == prop).verify
            if (verify) {
                await verify(val)
            }
        },
        regionTxt(val = [], prop, placeholder) {
            console.log(val, prop)
            if (val.length > 0) {
                return val.join('-')
            }
            return placeholder
        },
        inputChange(val, prop) {
            this.form[prop] = val
        },
        async propChange(val, prop) {
            await this.blurCheck(val, prop)
            this.form[prop] = val
        },
        async selectChange(index, prop) {
            const item = this.formItems.find(v => v.prop == prop)
            const val = item.options[index].value
            await this.blurCheck(val, prop)
            this.form[prop] = val
        },
        selectTxt(val, prop, placeholder) {
            console.log(111, val, prop)
            const options = this.formItems.find(v => v.prop == prop).options
            if (!val) {
                return placeholder
            }
            return options.find(v => v.value == val).label
        },
        setMarker(latitude, longitude) {
            let markers = [
                {
                    id: new Date().getTime(), // 唯一标识符
                    latitude: latitude,//纬度
                    longitude: longitude,//经度
                    width: 30,//地图icon的宽度
                    height: 30,//地图icon的高度
                    iconPath: "/static/poi.png",
                }
            ];

            this.mapContext.addMarkers({
                markers,
                clear: true
            })
        },

        moveMap(latitude, longitude) {
            this.mapContext.moveToLocation({ latitude, longitude })
        },
        chooseLocation() {
            wx.chooseLocation({
                latitude: this.latitude,
                longitude: this.longitude,
                success: (res) => {
                    console.log(res)
                    const { latitude, longitude, address } = res
                    this.latitude = latitude;
                    this.longitude = longitude;
                    this.form.address = address
                    this.setMarker(latitude, longitude)
                    this.moveMap(latitude, longitude)
                }
            })
        },
        async getMemberRegion() {
            let res = await getMemberRegion({
                mid: this.mid,
                wid: this.wid
            })
            this.regionOptions = res
        },

        async subMit() {
            let params = {
                ...this.form,
                mid: this.mid,
                lon: this.longitude,
                lat: this.latitude,
                wid: this.wid,
            }
            delete params.updated_name
            delete params.region_id
            delete params.region
            delete params.created_at
            await setMemberInfo(params)
            wx.showToast({
                title: '客户资料保存成功',
                icon: 'none'
            })
            wx.navigateBack()
        },


    },

}
</script>

<style src="./assets/index.scss" lang="scss" scoped></style>


